<template>
	<view class="el-avatar" :class="[`el-avatar-${shape}`]" :style="[{ backgroundColor: (text || icon) ? (randomBgColor ? colors[colorIndex !== '' ? colorIndex : random(0, 19)] : bgColor) : 'transparent',width: size + 'px',height: size + 'px'}]" @click="clickHandler">
		<slot>
			<!-- #ifdef MP -->
			<open-data v-if="mpAvatar && allowMp" type="userAvatarUrl" :style="[{ width: size + 'px', height: size + 'px' }]" />
			<!-- #endif -->
			<!-- #ifndef MP  -->
			<template v-if="mpAvatar && allowMp"></template>
			<!-- #endif -->
			<uni-icons v-else-if="icon" :type="icon" size="20" color="#ffffff"></uni-icons>
			<text v-else-if="text" :style="[{ width: size + 'px', height: size + 'px', lineHeight: size + 'px' }]">{{ text }}</text>
			<image v-else class="el-avatar-image" :class="[`el-avatar-image-${shape}`]" :src="avatarUrl || defaultUrl" :mode="mode" @error="errorHandler" :style="[{ width: size + 'px', height: size + 'px' }]"></image>
		</slot>
	</view>
</template>
 
<script setup>
	import { ref,watch,computed } from "vue";
	
	const props = defineProps({
		src: {
		    type: String,
		    default: ''
		},
		// 头像形状，circle-圆形，square-方形
		shape: {
		    type: String,
		    default: 'circle'
		},
		// 头像尺寸
		size: {
		    type: [String, Number],
		    default: 40
		},
		// 裁剪模式
		mode: {
		    type: String,
		    default: 'scaleToFill'
		},
		// 显示的文字
		text: {
		    type: String,
		    default: ''
		},
		// 背景色
		bgColor: {
		    type: String,
		    default: '#c0c4cc'
		},
		// 文字颜色
		color: {
		    type: String,
		    default: '#ffffff'
		},
		// 文字大小
		fontSize: {
		    type: [String, Number],
		    default: 18
		},
		// 显示的图标
		icon: {
		    type: String,
		    default: ''
		},
		// 显示小程序头像，只对百度，微信，QQ小程序有效
		mpAvatar: {
		    type: Boolean,
		    default: false
		},
		// 是否使用随机背景色
		randomBgColor: {
		    type: Boolean,
		    default: false
		},
		// 加载失败的默认头像(组件有内置默认图片)
		defaultUrl: {
		    type: String,
		    default: ""
		},
		// 如果配置了randomBgColor为true，且配置了此值，则从默认的背景色数组中取出对应索引的颜色值，取值0-19之间
		colorIndex: {
		    type: [String, Number],
		    // 校验参数规则，索引在0-19之间
		    validator(n) {
		        return uni.$e.check.isRange(n, [0, 19]) || n === ''
		    },
		    default: ''
		},
		// 组件标识符
		name: {
		    type: String,
		    default: ''
		}
	});
	
	const emits  	= defineEmits(["click"]);
	const colors 	= ref(['#ffb34b', '#f18080', '#94d554', '#f19ec2','#afaae4', '#e1b0df', '#c38cc1', '#72dcdc']);
	const avatarUrl = ref(props.src);
	const allowMp   = ref(false);
	
	const init = ()=>{
		// #ifdef MP
		allowMp.value = true
		// #endif
	}
	init();
	
	const clickHandler = ()=>{
		emits("click");
	}
	
	const errorHandler = ()=>{
		avatarUrl.value = props.defaultUrl;
	}
	
	watch(()=>props.src,(newValue,oldValue)=>{
		avatarUrl.value = newValue;
		if(!newValue) errorHandler();
	},{ deep: true,immediate: true });
	
</script>

<style lang="scss" scoped>
	.el-avatar {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		text {
			border-radius: 50%;
			overflow: hidden;
			text-align: center;
			color: #fff;
		}
		&.el-avatar-circle { 
			border-radius: 100px;
		}
		&.el-avatar-square { 
			border-radius: 4px;
		}
		.el-avatar-image {
			overflow: hidden;
			&.el-avatar-image-circle {
				border-radius: 100px;
			}
			
			&.el-avatar-image-square {
				border-radius: 4px;
			}
		}
	}
</style>